import React, { Component } from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

class PFlatList extends Component {
    constructor(props){
        super(props)
        this.state = {
            data: [
                {key: 'Devin'},
                {key: 'Jackson'},
                {key: 'James'},
                {key: 'Joel'},
                {key: 'John'},
                {key: 'Jillian'},
                {key: 'Jimmy'},
                {key: 'Julie'},
            ]
        }
    }

    render(){
        const {data} = this.state
        return (
            <View style={styles.container}>
                <FlatList
                data={data}
                renderItem={({item, index}) => <Text key={index} style={styles.item}>{item.key}</Text>}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
     flex: 1,
     paddingTop: 22
    },
    item: {
      padding: 10,
      fontSize: 88,
    },
  })

export default PFlatList